{subtemplate common/header}
<style type="text/css">
.heart-pg {
    width: $config['pgwidth']px;
    height: $config['pgheight']px;
    position: absolute;
    z-index: 19;
}
.heart {
    width: $config['pgwidth']px;
}
.rank {
    position: relative;
    height: 50px;
    width: 250px;
    margin-left: 20px;
    border-top: 3px solid #F6F6F6;
    border-bottom: 3px solid #F6F6F6;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(179,220,237,0.85) 35%, rgba(179,220,237,0.7) 68%, rgba(188,224,238,0.56) 100%);
}
.favt img{
    position: absolute;
    top: -10px;
    border-radius: 45px;
    border: 2px solid #FFF;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
    width: 60px;
    height: 60px;
}
.avleft img {left: -20px;}
.avright img {right: -20px;}
.rank .info {
    padding-top: 5px;
    height: 25px;
    position: relative;
}
.num{
    width: 100%;
    display: block;
    text-align: center;
}
.rank .heart-pg {
    left: 110px;
    top: 5px;
}
.friend-container{ width: 100%; }
.friend{ float:left; width: 20%; height:130px; text-align: center;}
.friend .favatar {
    position: relative;
}
.friend .favatar .heart-pg {
    right: 20px;
    top: 10px;    
}
.friend .avt img{
    margin: 10px 0;
    border-radius: 45px;
    border: 2px solid #FFF;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
    width: 75px;
    height: 75px;
}
.fusername {
    position: absolute;
}
.uleft {
    left: 50px;
}
.uright{
    right: 50px;
}
</style>
<div class="bm cl" id="pt">
    <div class="z">
        <a title="home" class="nvhm" id="fjump" href="./"></a> <em> </em><a href="index.php">$_G[setting][bbname]</a> <em>&rsaquo;</em><a href="plugin.php?id=yyd_friendliness:index">{lang yyd_friendliness:name}</a>
    </div>
</div>
<div class="mn" style="min-height:600px">
    <div class="bm bmw fl cl" style="width:300px; height:600px; float:left;border: none;">
        <div class="bm_h cl">
            <h2>{lang yyd_friendliness:top10}</h2>
        </div>
        <table style="border:none;" cellpadding="0" cellspacing="0" class="dt">
            <!--{loop $tops $top}-->
            <tr><td style="height: 70px; border:none;">
            <div class="rank">
                <div class="favt avleft">
                    $top['avatar1']
                </div>
                <div class="favt avright">
                    $top['avatar2']
                </div>
                <div class="heart-pg" title="$levels[$top['level']]['name']($top['friendliness'])" style="background: url($levels[$top['nextlv']]['image'])">
                    <div class="heart" style="height: $top['progress']px; background-image: url($levels[$top['level']]['image']);"></div>  
                </div>
                <div class="info">
                    <span class="fusername uleft"><a target="_blank" href="plugin.php?id=yydjourney:index&uid=$top[uid1]">$top['username1']</a></span>
                    <span class="fusername uright"><a target="_blank" href="plugin.php?id=yydjourney:index&uid=$top[uid2]">$top['username2']</a></span>
                </div>
                <div class="num">
                    <span>$levels[$top['level']]['name']($top['friendliness'])</span>
                </div>
            </div>
            </td></tr>
            <!--{/loop}-->
        </table>
    </div>
    <div class="bm bmw fl cl" style="width:600px; height:600px; float:right; overflow: auto;border: none;">
        <div class="bm_h cl">
            <h2>{lang yyd_friendliness:me} {lang yyd_friendliness:title_of} $config['friends']</h2>
        </div>
        <ul class="friend-container">
            <!--{loop $friends $friend}-->
            <li class="friend">
                <div class="favatar">
                    <div class="heart-pg" title="$levels[$friend['level']]['name']($friend['friendliness'])" style="background: url($levels[$friend['nextlv']]['image'])">
                        <div class="heart" style="height: $friend['progress']px; background-image: url($levels[$friend['level']]['image']);"></div>  
                    </div>
                    <div class="avt">$friend['avatar']</div>
                </div>
                <a target="_blank" href="plugin.php?id=yydjourney:index&uid=$friend[uid]">$friend['username']</a>
            </li>
            <!--{/loop}-->
        </ul>
    </div>
</div>
{subtemplate common/footer}